<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*
         * 1、我们要做的东西都是由浏览器打开才能看到的
         * 		那浏览器的品种又非常多，举几个
         * 		由于每个浏览器的内核不同，渲染引擎也不同，所以对样式的解析也不同，就造成了写同样的代码，在不同的浏览器里显示不一样
         * 		一样的代码出来不同的效果我们称它为兼容性
         *
         * 		浏览器分四类，chrom ff safiry IE(ie6 7 8 9 10 11)
         * 		如果是一个电商的网站，不考虑ie6的话会损失一部分利益（打开淘宝看一下）
         */
    </style>
</head>
<body>
<!--
    兼容性问题
        1、IE6下怪异盒模型
        2、IE6下最小高度问题
        3、IE6下不支持1px的点线
        4、IE6下内容会把父级的高度撑开
        5、IE6下只支持给a标签添加伪类
        6、IE67下不支持给块标签加display:inline-block
        7、IE8以及IE8以前的浏览器都不支持opacity
        8、IE6不支持固定定位
        9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙
        10、IE6下双边距问题
        11、IE67下父级有边框，子级有margin的话会不起作用
        12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）
        13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效
        14、IE6下文字溢出的问题
        15、IE67li间隙问题
        16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
        17、IE6下同一层级的浮动元素会盖住绝对定位元素
        18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
        19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
        20、IE67下输入类型的表单控件，上下两边各有1px的间隙
        21、IE8以及IE8之前不识别H5标签
        22、IE6不支持png透明图片
-->
</body>
</html>
